要素にロール、ステート、プロパティを
付与するための属性の仕様定義
WAI-ARIA のベストプラクティスは
なるべく WAI-ARIA を使わないこと
16~69歳の視覚障がい者の 91.7% が
インターネットを利用しています。
主に音声読み上げソフトを利用
見え方や見えやすい条件に多様な個人差がある
Web 利用方法も様々
| PC-Talker | 41,040 円(税込) | 国内シェア 85.3% |
| JAWS | 153,360 円(税込) | |
| NVDA | 無料 | オープンソース |
| ナレーター | Windows 標準付属 | Ctrl + Win + Enter |
| VoiceOver | macOS, iOS 標準付属 |
| NetReaderⅡ | 30,240円(税込) | 要 PC-Talker |
| IBM Home Page Reader | 販売終了 | IE 6 まで |
| ALTAIR | 無料 | DL リンク切れ... |
Web Content Accessibility Guidelines (WCAG) 2.0 [日本語訳]
https://waic.jp/docs/WCAG20/Overview.html
パッと見ハードル高そうな印象を受けるけど文章は割と平易
ガイドライン 1.1 テキストによる代替: すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。
ガイドライン 2.1 キーボード操作可能: すべての機能をキーボードから利用できるようにすること。
目次ぐらい目を通しても損にはならない
<button class="icon-button" aria-label="お気に入りに追加">
<i class="mdi mdi-star"></i>
</button><p>この要素は読み上げられます</p>
<p aria-hidden="true">この要素は読み上げられません</p>この要素は読み上げられます
この要素は読み上げられません
<div role="tablist" aria-label="Entertainment">
<button role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">
Nils Frahm
</button>
<button role="tab" aria-selected="false" aria-controls="agnes-tab" id="agnes" tabindex="-1">
Agnes Obel
</button>
</div>
<div tabindex="0" role="tabpanel" id="nils-tab" aria-labelledby="nils">
<p>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.</p>
</div>
<div tabindex="0" role="tabpanel" id="agnes-tab" aria-labelledby="agnes" hidden="">
<p>Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.</p>
</div>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.
Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.
role 属性や aria-* 属性を規定する W3C 勧告
WAI-ARIA
https://momdo.github.io/wai-aria-1.1/
要素にロール、ステート、プロパティを
付与するための属性の仕様定義
WAI-ARIA のベストプラクティスは
なるべく WAI-ARIA を使わないこと
WAI-ARIA Authoring Practices に WAI-ARIA 属性の
使い方と具体例があるのでマネすると話が早い
(先ほどのタブの例はここから拝借した)
WAI-ARIA Authoring Practices 1.1
https://www.w3.org/TR/wai-aria-practices/
WAI-ARIA 属性を勝手に付与してくれるような
コンポーネントライブラリを選べば話が超早い
jQuery UI や Material UI (React)、 Element (Vue.js) など
そもそもなるべく使わない方が良いものなので
必死に覚えなくていいと思う。個人的には。
歪んだ文字画像を表示して文字に起こさせることで
利用者が人間であることを確認するツール
画像の代わりに音声を文字に起こす CAPTCHA もある
画像だけの CAPTCHA は視覚障がい者の大敵
チェックボックスをクリックするだけで
利用者が人間であることを確認するツール
マウスの動きなどから人間か機械かを判断するらしい
画像/音声 CAPTCHA もオプションとして提供される
最近『インクルーシブデザイン』という言葉を目にする
『アクセシブル』も『ユニバーサル』も『インクルーシブ』も
「多様な利用者・環境に配慮する」という文脈を形成する意味で
同じように利用される
が、『インクルーシブデザイン』という言葉を選ぶときは
「障がい者や高齢者を巻き込んで一緒にデザインする」
という意味を込めたり込めなかったりする点に留意が必要
インクルーシブデザインの原則
(「Inclusive Design Principles」日本語訳)
http://inclusivedesignprinciples.org/ja/
↑ とても読みやすいアクセシビリティガイドラインになっていてオススメ
視覚障害者のインターネット利用特性と問題分析:みんなのウェブ
http://barrierfree.nict.go.jp/accessibility/proof/report/blind/index.html
視覚障害者の携帯電話・スマートフォン・タブレット・パソコン利用状況調査2013: 新潟大学学術リポジトリ Nuar
http://dspace.lib.niigata-u.ac.jp/dspace/handle/10191/27807
盲目のiPhoneユーザーに聞いた、視覚を使わない驚きのスマホ操作術 | スタッフブログ | マイネ王
https://king.mineo.jp/magazines/special/387
モバイルアクセシビリティ:WCAG 2.0やその他W3C/WAIのガイドラインのモバイルへの適用 - Qiita
https://qiita.com/magi1125/items/2c2e9d78c6db2724a826
エー イレブン ワイ[WebA11y.jp]
http://weba11y.jp/
Tips for Getting Started • WAI
https://www.w3.org/WAI/gettingstarted/tips/